import React from 'react';
import { observer, inject } from 'mobx-react';
import { Qrcode, Icon } from 'weaver-mobile';

@inject('portalLoginStore')
@observer
class QRCode extends React.Component {
  constructor(props) {
    super(props);
    this.onRefresh = this.onRefresh.bind(this);
  }

  componentDidMount() {
    const { portalLoginStore: store } = this.props;
    store.onQCLoginStart();
  }

  componentWillUnmount() {
    const { portalLoginStore: store } = this.props;
    store.onQCLoginEnd();
  }

  render() {
    const { portalLoginStore: store } = this.props;
    const { data = {}, labels = {}, loginForm = {}, qrcodeIsInvalid } = store;
    const { qrcodeconfig = {} } = data;
    const { qrCode = {} } = loginForm;

    return (
      <div className="portal-login-qrcode">
        <div className="portal-login-qrcode-img">
          {qrcodeIsInvalid && (
            <div className="portal-login-qrcode-timeout">
              <div className="portal-login-qrcode-timeout-mask" />
              <div className="portal-login-qrcode-timeout-tips">{labels.label14}</div>
              <div className="portal-login-qrcode-timeout-refresh" title={labels.label15} onClick={this.onRefresh}>
                <Icon type="refresh" size="lg" />
              </div>
            </div>
          )}
          {qrCode.text && <Qrcode text={qrCode.text} size={180} fgColor="#404549" bgColor="#eaeaea" />}
        </div>
        <div className="portal-login-qrcode-desc">
          <div className="portal-login-qrcode-text">{qrcodeconfig.fontText}</div>
        </div>
      </div>
    );
  }

  onRefresh() {
    const { portalLoginStore: store } = this.props;
    store.getLoginForm({}, () => store.onQCLoginStart());
  }
}

export default QRCode;
